<template>
    <div class="details">
        <!-- 全局组件 -->
        <headed />
        <div>
            <!-- 头部背景图片+标题 -->
            <div class="bgimg" v-for="(item, index) in coursedata" :key="index">
                <p class="title">{{ item.ctitle }}</p>
            </div>
            <div class="content">
                <!-- 课程提示 -->
                <div class="tip" v-for="(item, index) in coursedata" :key="index">
                    <div>
                        <span class="tipdata">{{ item.ctype }}</span>
                        <span>课程等级</span>
                    </div>
                    <div>
                        <span class="tipdata">{{ item.signup_number }}</span>
                        <span>报名人数</span>
                    </div>
                    <div>
                        <span class="tipdata">{{ item.collection_number }}</span>
                        <span>收藏人数</span>
                    </div>
                    <div class="but">
                        <a @click="tolearn(item)">开始学习</a>
                    </div>
                </div>

                <!-- 详情 -->
                <div class="itembox">
                    <div class="outline">课程大纲</div>
                    <div class="item">
                        <div class="left">
                            <div class="list" @click="liclick($event, item)" v-for="(item, index) in coursechapters"
                                :key="index">
                                <div :data_id="item.course_section_id" class="text">{{ item.section_name }}</div>
                                <div class="right" :style="{ display: (index == 0 ? 'block' : 'none') }"
                                    ref="chaptercontent" :data_id="item.course_section_id">
                                    <div class="text">{{ item.section_name }}</div>
                                    <div class="text">{{ item.description }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <foot />
            </div>

        </div>

    </div>
</template>

<style lang="less" scoped>
.details {
    margin-top: @rowheight;

    .bgimg {
        width: 100%;
        height: 300px;
        line-height: 200px;
        background-image: url(../../assets/images/coursebg.png);
        background-position: 0 100%;

        &>.title {
            font-size: 40px;
            color: #fff;
            background-color: transparent;
        }
    }

    .content {
        width: 85%;
        position: fixed;
        top: 220px;
        left: calc((100vw - 85%) / 2);
        background-color: transparent;

        .tip {
            width: 100%;
            height: 200px;
            background: -webkit-linear-gradient(left, rgb(172, 199, 240), rgb(178, 200, 240), rgb(221, 239, 246));
            display: flex;
            justify-content: space-between;
            border-radius: 20px;

            &>div {
                flex: 1;
                height: 100px;
                line-height: 100px;
                margin-top: 50px;
                background-color: transparent;

                &>span {
                    display: block;
                    height: 50px;
                    line-height: 50px;
                    background-color: transparent;
                    color: #fff;
                    font-size: 16px;
                }

                .tipdata {
                    font-size: 25px;
                }
            }

            &>.but {
                &>a {
                    padding: 12px;
                    font-size: 25px;
                    color: #fff;
                    background-color: #f24e4b;
                    border-radius: 10px;
                }
            }
        }

        .itembox {
            margin-top: 40px;

            .outline {
                text-align: left;
                font-size: 20px;
                font-weight: bold;
                padding-bottom: 5px;
            }

            .item {
                position: relative;
                cursor: pointer;

                .left {
                    width: 20%;

                    & .list {
                        height: 40px;
                        line-height: 40px;
                        text-align: left;
                    }
                }

                .right {
                    position: absolute;
                    top: 0;
                    left: 20%;
                    width: 80%;
                    height: 203px;
                    text-align: center;
                }

                .text {
                    font-size: 16px;
                }
            }

        }

    }

}
</style>

<script>

export default {
    data() {
        return {
            tabPosition: 'res',
            //对应课程数据
            coursedata: [],
            //课程章节
            coursechapters: [],
            //用户id
            userdata: JSON.parse(sessionStorage.getItem("userData")),

            //课程数组
            coueseArr: []
        };
    },
    methods: {
        //开始学习按钮
        tolearn(item) {
            this.$router.push({
                path: './learn',
                //传递对应后端数据的id
                query: {
                    //课程id
                    courseid: item.course_id,
                    //用户id
                    userid: this.userdata.user_detail_id
                },
            })
        },
        //遍历课程章节显示
        liclick(e, item) {
            let chapter = e.target.getAttribute('data_id')
            if (chapter == item.course_section_id) {
                let contentArr = this.$refs.chaptercontent
                contentArr.forEach(item => {
                    item.style.display = "none";
                    if (item.getAttribute('data_id') == chapter) {
                        item.style.display = "block";
                    }
                })
            }
        }
    },
    mounted() {
        //进入页面取点击时获取的数据id 取后端取数据
        this.$http.post('http://test.com:3000/details/detailspage', { courseid: this.$route.query.courseid })
            .then(
                res => {
                    this.coursedata = res.data
                }
            )

        //获取课程章节信息
        this.$http.post('http://test.com:3000/details/coursechapters', { courseid: this.$route.query.courseid })
            .then(
                res => {
                    this.coursechapters = res.data
                }
            )
    }
};
</script>